<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-09-13 15:32:10
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-09-18 20:42:54
 * @FilePath: \郭招娣\app\src\views\Work.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%%
-->
<template>
  <div class="contain">
    <el-scrollbar>
      <div class="content">
        <el-card class="box-card">
          <span>面板导航</span>
          <el-divider />
          <div
            id="main"
            style="width: 100%; height: 400px; padding: 30px"
          ></div>
         
        </el-card>

        <el-card class="nav">
          <p>快速导航</p>
          <el-divider />
          <div class="nav-item">
            <span @click="$router.push('/layout/all')">文章管理</span>
            <span @click="$router.push('/layout/comment')">评论管理</span>
            <span @click="$router.push('/layout/file')">文件管理</span>
            <span @click="$router.push('/layout/users')">用户管理</span>
            <span @click="$router.push('/layout/access')">访问管理</span>
            <span @click="$router.push('/layout/system')">系统设置</span>
          </div>
        </el-card>

        <el-card class="box-passage">
           <p>最新文章</p>
          <el-divider />
        </el-card>


        <el-card class="box-comment">
           <p>最新评论</p>
          <el-divider />
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapMutations } from "vuex";
export default {
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "每周用户访问指标",
      },
      legend: {
        data: ["评论数","访问量",  "Video Ads", "Direct", "Search Engine"],
      },
    
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
           name: "评论数",
          type: "bar",
          data: [163, 144, 168, 72, 138, 210, 197],
          itemStyle: {
            color: "#A52A2A",
            borderWidth: 1,
            // borderType: "solid",
          },
        },
        {
          name: "访问量",
          type: "line",
          stack: "Total",
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        
      ],
    });
  },
  data() {
    return {
      user: JSON.parse(localStorage.getItem("user")),
      role: localStorage.getItem("author"),
    };
  },
  methods: {
    ...mapMutations({
      getWorkbench: "getWorkbench",
    }),
    init() {
      this.getWorkbench({ workbench: true });
      
    },
  },
  created() {
    this.init();
  },
};
</script>

<style scoped>
.box-card ,
.nav,
.box-passage,
.box-comment{
  margin-top: 30px;
}
.nav-item{
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>